<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- app组件 -->
        <app></app>
    </div>


    <script>
        Vue.config.productionTip = false;
        // 学生
        const student = Vue.extend({
            template: `<div>
            {{name}}
            </div>`,
            data() {
                return {
                    name: "张三"
                }
            }
        });
        // 老师
        const teacher = Vue.extend({
            template: `<div>
            {{name}}
            </div>`,
            data() {
                return {
                    name: "罗翔"
                }
            }
        });
        // 学校
        const school = Vue.extend({
            template: `<div>
                <student></student>
                <teacher></teacher>
            </div>`,
            components: {
                student,
                teacher
            },

        })
        // happy
        const happy = Vue.extend({
            template: `<div>
                {{name}}
            </div>`,
            data() {
                return {
                    name: "happy"
                }
            }
        })
        // app
        const app = Vue.extend({
            template: `<div>
                <school></school>
                <happy></happy>
            </div>`,
            components: {
                school,
                happy
            },
        })
        const Vm = new Vue({
            el: "#root",
            components: {
                app
            }
        })

    </script>
</body>

</html>